import { BrowserRouter, Routes, Route, useRoutes } from 'react-router-dom'
import { TransitionGroup, CSSTransition } from 'react-transition-group';
import LayoutC from './pages/LayoutC'
import Board from './pages/Board'
import Article from './pages/Article'
import NotFound from './pages/NotFound'
import Login from './pages/Login'
import ArticleWrite from './pages/ArticleWrite'
import ArticleDetail from './pages/ArticleDetail'
import User from './pages/User'
import ArticleCategory from './pages/ArticleCategory'
// 1. 准备一个路由数组 数组中定义所有的路由对应关系
const routesList = [
  {
    path: '/',
    element: <LayoutC />,
    children: [
      {
        element: <Board />,
        index: true, // index设置为true 变成默认的二级路由
      },
      {
        path: '/article',
        element: <Article />,
        meta: {
          name: '文章管理'
        }
      },
      {
        path: '/articleWrite',
        element: <ArticleWrite />,
        meta: {
          name: '编写文章'
        }
      },
      {
        path: '/articleWrite/:id',
        element: <ArticleWrite />,
        meta: {
          name: '编辑文章'
        }
      },
      {
        path: '/articleDetail/:id',
        element: <ArticleDetail />,
        meta: {
          name: '文章详情'
        }
      },
      {
        path: '/articleCategory',
        element: <ArticleCategory />,
        meta: {
          name: '文章分类'
        }
      },
      {
        path: '/user',
        element: <User />,
        meta: {
          name: '用户管理'
        }
      }
    ],
  },
  {
    path: '/login',
    element: <Login />
  },
  // 增加n个路由对应关系
  {
    path: '*',
    element: <NotFound />,
  },
]
// 2. 使用useRoutes方法传入routesList生成Routes组件
function WrapperRoutes() {
  let element = useRoutes(routesList)
  return element
}



function App() {

  return (
    <div className="App">
      <BrowserRouter>
        <TransitionGroup>
          <CSSTransition
            key={location.key}
            timeout={1300}
            classNames="fade"
          >
            {/* 3. 替换之前的Routes组件 */}
            <WrapperRoutes />
          </CSSTransition>
        </TransitionGroup>
      </BrowserRouter>
    </div>
  )
}

export default App